<template>
	<div>
		<a class="goBack" href="http://bigscreen.jywj12333.com:90/admin/index_bigScreen">数据中台</a>
		<a class="goNext" href="http://bigscreen.jywj12333.com:90/admin/bigScreen#/wj07/index">下一屏</a>
		<a class="goLast" href="http://bigscreen.jywj12333.com:90/admin/bigScreen#/wj05/index">上一屏</a>
		<aside class="fixed-wrapper">
			<span>{{ dateTime }}</span>
			<el-dropdown @command="handleOptClick" class="dropDown-wrapper">
				<span class="el-dropdown-link">
					数据范围: {{ curOpt }}
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item :command="`今日`">今日</el-dropdown-item>
					<el-dropdown-item :command="`本月`">本月</el-dropdown-item>
					<el-dropdown-item :command="`本季度`">本季度</el-dropdown-item>
					<el-dropdown-item :command="`本年`">本年</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</aside>
		<el-container style="height: 100vh;">
			<el-header height="82px" style="padding: 0"><router-view></router-view></el-header>
			<!--<router-view name="posts" v-if="postsHeight" :height="postsHeight" :dateProp="dateProp" :style="`height:${postsHeight}px;`"></router-view>-->
			<el-main ref="reference" :style="`padding:${marTop}px 20px 20px 20px !important`">
				<el-row :gutter="15">
					<el-col :span="6">
						<router-view
							ref="rightCol_01"
							name="rightCol_01"
							v-if="rightCol_01"
							:height="rightCol_01"
							:dateProp="dateProp"
							:style="`height:${rightCol_01}px;`"
						></router-view>
						<router-view
							ref="rightCol_02"
							name="rightCol_02"
							v-if="rightCol_02"
							:height="rightCol_02"
							:dateProp="dateProp"
							:style="`height:${rightCol_02}px;`"
						></router-view>
					</el-col>
					<el-col :span="12">
						<router-view ref="midCol_01" name="midCol_01" v-if="midCol_01" :height="midCol_01" :dateProp="dateProp" :style="`height:${midCol_01}px;`"></router-view>
						<router-view ref="midCol_02" name="midCol_02" v-if="midCol_02" :height="midCol_02" :dateProp="dateProp" :style="`height:${midCol_02}px;`"></router-view>
					</el-col>
					<el-col :span="6">
						<router-view
							ref="leftCol_01"
							name="leftCol_01"
							v-if="leftCol_01"
							:height="leftCol_01"
							:dateProp="dateProp"
							:style="`height:${leftCol_01}px;`"
						></router-view>
						<router-view
							ref="leftCol_02"
							name="leftCol_02"
							v-if="leftCol_02"
							:height="leftCol_02"
							:dateProp="dateProp"
							:style="`height:${leftCol_02}px;`"
						></router-view>
						<router-view
							ref="leftCol_03"
							name="leftCol_03"
							v-if="leftCol_03"
							:height="leftCol_03"
							:dateProp="dateProp"
							:style="`height:${leftCol_03}px;`"
						></router-view>

						<!-- <router-view ref="rightCol_03" name="rightCol_03" v-if="rightCol_03" :height="rightCol_03" :dateProp="dateProp" :style="`height:${rightCol_03}px;`"></router-view> -->
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			date: new Date(),
			curOpt: '本月',
			leftCol_01: null,
			leftCol_02: null,
			leftCol_03: null,
			midCol_01: null,
			midCol_02: null,
			rightCol_01: null,
			rightCol_02: null,
			rightCol_03: null,
			dateTime: '',
			timer: '',
			marTop: ''
		};
	},
	computed: {
		dateStr() {
			return this.formatDate(this.date, 'YYYY-MM-DD HH:mm:ss');
		},
		dateProp() {
			if (this.curOpt === '本月') {
				return {
					month: this.formatDate(this.date, 'YYYY-MM')
				};
			} else if (this.curOpt === '本季度') {
				return {
					year: this.formatDate(this.date, 'YYYY'),
					quarter: this.formatDate(this.date, 'quarter')
				};
			} else if (this.curOpt === '本年') {
				return {
					year: this.formatDate(this.date, 'YYYY')
				};
			} else {
				return {
					date: this.formatDate(this.date, 'YYYY-MM-DD')
				};
			}
		},
		mainHeight: {
			get() {
				return 0;
			},
			set(val) {
				this.leftCol_01 = (val * 1) / 3 - 40 / 3;
				this.leftCol_02 = (val * 1) / 3 - 40 / 3;
				this.leftCol_03 = (val * 1) / 3 - 40 / 3;
				this.midCol_01 = (val * 2) / 7 - 10;
				this.midCol_02 = (val * 5) / 7 - 10;
				this.rightCol_01 = (val * 1) / 2;
				this.rightCol_02 = val / 2 - 20;
				this.rightCol_03 = (val * 1) / 3 - 40;
				this.marTop = val / 23;
			}
		}
	},
	methods: {
		switchRange(range) {
			switch (range) {
				case 'range=1':
					this.curOpt = '今日';
					break;
				case 'range=2':
					this.curOpt = '本月';
					break;
				case 'range=3':
					this.curOpt = '本季度';
					break;
				case 'range=4':
					this.curOpt = '本年';
					break;
			}
		},
		addzero(data) {
			if (JSON.stringify(parseInt(data)).length == '1') {
				return '0' + data;
			} else {
				return data;
			}
		},
		handleOptClick(name) {
			this.curOpt = name;
			this.$nextTick(_ => {
				this.$refs.leftCol_01.init();
				this.$refs.leftCol_02.init();
				this.$refs.leftCol_03.init();
				this.$refs.midCol_01.init();
				this.$refs.midCol_02.init();
				this.$refs.rightCol_01.init();
				this.$refs.rightCol_02.init();
				this.$refs.rightCol_03.init();
			});
		}
	},
	mounted() {
		this.mainHeight = this.$refs.reference.$el.clientHeight - 40;
		this.$store.commit('UPDATE_DATE', this.formatDate(this.date, 'YYYY-MM-DD'));
		this.timer = setInterval(() => {
			var myDate = new Date();
			let newDate =
				myDate.getFullYear() +
				'-' +
				this.addzero(myDate.getMonth() + 1) +
				'-' +
				this.addzero(myDate.getDate()) +
				' ' +
				this.addzero(myDate.getHours()) +
				':' +
				this.addzero(myDate.getMinutes()) +
				':' +
				this.addzero(myDate.getSeconds());
			this.dateTime = newDate;
		}, 1000);
		this.switchRange(window.location.href.split('?')[1].split('&')[0]);
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timeId);
		}
	}
};
</script>
<style lang="stylus" scoped>
.fixed-wrapper
	position fixed
	top 20px
	right 15px
	z-index 1000
	color #35ced8
.dropDown-wrapper
	color #ffffff
</style>
